<template>
  <div class="aiDevice">
    <header>
      <h2>AI Device</h2>


      <div class="devicelist">
        <SvgIcon name="蓝牙" :size="16" color="#315efb" />
        <span>设备列表</span>
      </div>
      <SvgIcon class="setting" name="设置" :size="16" @click="emit('setting')" />
    </header>
    <div class="backgroundnoe">
    </div>
    <div class="card">
      <div class="card-setting">
        <div class="setting-title"><span>眼镜设置</span><span>100%</span>
          <SvgIcon name="Electricity" :size="16" />
        </div>
        <div class="setting-list">

          <div v-for="item in setting" class="item">
            <div class="top">
              <SvgIcon :name="item.icon" :size="16" />
              <span>{{ item.name }}</span>
            </div>
            <van-slider v-model="item.progress" bar-height="20px" />
          </div>
        </div>
      </div>
      <div class="card-setting">
        <div class="setting-title"><span>AI功能</span>
        </div>
        <div class="setting-list">

          <div v-for="item in ability" class="item">
            <div class="top">
              <div class="top-svg" :style="item.color">
                <SvgIcon :name="item.icon" :size="20" />
              </div>
            </div>
            <div class="button">{{ item.name }}</div>
            <SvgIcon class="item-right" name="right" :size="20" />

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const emit = defineEmits(['setting'])
//眼睛设置
const setting = ref([
  {
    icon: '太阳',
    name: '亮度',
    progress: 50,
  },
  {
    icon: '喇叭',
    name: '声音',
    progress: 50,
  },
])
const ability = ref([
  {
    icon: 'AI查询',
    name: 'AI查询',
    color: 'background: linear-gradient(316deg, #706DFF 18.79%, #9584FF 84.71%);'
  },
  {
    icon: '实时翻译',
    name: '实时翻译',
    color: 'background: linear-gradient(313deg, #1F86FF 16.63%, #2CA6FF 86.83%);'
  },
  {
    icon: '随笔记',
    name: '随笔记',
    color: 'background: linear-gradient(303deg, #FFA710 13.28%, #FFC701 86.45%);'
  },
  {
    icon: '景点识别',
    name: '景点识别',
    color: 'background: linear-gradient(313deg, #1F86FF 16.63%, #2CA6FF 86.83%);'
  },
  {
    icon: '路牌翻译',
    name: '路牌翻译',
    color: 'background: linear-gradient(303deg, #FFA710 13.28%, #FFC701 86.45%);'

  },
  {
    icon: '对话翻译',
    name: '对话翻译',
    color: 'background: linear-gradient(316deg, #706DFF 18.79%, #9584FF 84.71%);'

  },
  {
    icon: '步行导航',
    name: '步行导航',
    color: 'background: linear-gradient(319deg, #00C08D 14.06%, #0DE1BB 86.71%);'
  }
])
</script>

<style lang="scss" scoped>
.aiDevice {
  width: 100%;
  position: relative;
  background: linear-gradient(180deg, #D7E3F4 0%, #D7E1EE 26.58%, #D3DBE8 57.73%);
  padding-bottom: 60px;

  header {

    width: 100%;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    h2 {
      color: #191919;
      font-size: 24px;
      font-weight: 500;
      margin-left: 20px;
    }

    .setting {
      margin-right: 16px;
    }

    .devicelist {
      display: flex;
      width: 84px;
      height: 28px;
      align-items: center;
      justify-content: center;
      color: var(--van-primary-color);
      margin-left: auto;
      margin-right: 16px;
      border-radius: 16px;
      background: #EDF4FF;

      span {
        font-size: 12px;
        font-weight: 500;
      }
    }
  }

  .backgroundnoe {
    width: 100%;
    height: 210px;
    // background: linear-gradient(to bottom, rgba(240, 240, 240, 1), rgba(240, 240, 240, 0));
    background: url('@/assets/image/Group.png') no-repeat center;
    background-size: 375px;
    background-position: center;
    display: flex;
    position: relative;


  }

  .card {
    border-radius: 27.243px 27.243px 0px 0px;
    background: #F4F6FA;
    width: 100%;
    height: 100%;
    padding: 16px;

    .card-setting {
      margin-top: 10px;

      .setting-title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          &:nth-child(1) {
            color: #191919;
            font-size: 13px;
            font-style: normal;
            font-weight: 500;
            opacity: 0.6;
            margin-left: 4px;
          }

          &:nth-child(2) {
            font-size: 12px;
            font-weight: 500;
            margin-left: auto;
            margin-right: 4px;
          }
        }
      }

      .setting-list {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
        flex-wrap: wrap;

        .item {
          width: 165.5px;
          height: 109px;
          border-radius: 20px;
          background-color: #FFF;

          padding: 16px;
          margin-bottom: 16px;
          position: relative;

          .item-right {
            position: absolute;
            right: 16px;
            top: 20px;
            color: #CCCCCCCC;
          }

          :deep(.van-slider__bar) {
            background: linear-gradient(to right, #71acff 0%, #3C75FF 100%);

            .van-slider__button {
              width: 12px;
              height: 12px;
              border: 3px solid #fff;
              margin-right: 25px;
              background: #6e9bff;
            }
          }


          .top {
            display: flex;
            align-items: center;
            color: #191919;
            font-size: 15px;
            margin-bottom: 30px;

            .top-svg {
              width: 36px;
              height: 36px;
              display: flex;
              justify-content: center;
              align-items: center;
              color: white;
              border-radius: 50%;
            }

            span {
              margin-left: 14px;
            }
          }

          .button {
            color: #191919;
            font-size: 15px;
            margin-top: -20px;
          }
        }
      }
    }
  }

}
</style>